<!-- 盒子模型，英文即box model。无论是div、span、还是a都是盒子。
 但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。

一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：

width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。

adding是4个方向的，所以我们能够分别描述4个方向的padding。

  padding-top: 30px;
	padding-right: 20px;
	padding-bottom: 40px;
	padding-left: 100px;

  综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）
  padding: 30px 40px;

  要懂得，用小属性层叠大属性。比如：
  padding: 20px;
  padding-left: 30px;

  但是如果这么写
  padding-left: 30px;
  padding: 20px;
  第一行的小属性无效，因为被第二行的大属性层叠掉了。

一些元素，默认带有padding，比如ul标签：


-->


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>

	<style type="text/css">

		div{
			width: 100px;
			height: 100px;
			border: 1px solid red;
			padding: 20px;
			margin: 30px;
		}

	</style>

 </head>

 <body>

	<div>有生之年</div>
	<div>狭路相逢</div>

 </body>

</html>

